<template>
  <div class="wrap">
    <van-list
      class="list-content"
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="li" v-for="item of list" :key="item.id" @click="goDetail(item.id)">
        <div class="top">
          <!-- <span>【{{ item.province }}】</span> -->
          <span>{{ item.title }}</span>
        </div>
        <div class="bottom">
          <span>编辑：{{ item.author }}</span>
          <span style="margin: 0 10px;">发布：{{ item.created_at }}</span>
          <span>浏览：{{ item.hits }}</span>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script setup>
import { getFileList } from './api'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const Route = useRoute()
const Router = useRouter()
const id = Route.query.id
const list = ref([])
const getData = (pageNum) => {
  getFileList({api_key: 'ER^%Tw', city_id: id, page: pageNum}).then(res => {
    if (res.code == 1) {
      loading.value = false
      list.value = list.value.concat(res.data)
      if (res.pagination.total == list.value.length) {
        finished.value = true
      } else {
        page.value++
      }
    }
  })
}
const goDetail = id => {
  Router.push({
    path: '/fileDetail',
    query: {
      id
    }
  })
}
const page = ref(1)
const loading = ref(false)
const finished = ref(false)
const onLoad = () => {
  console.log(page.value)
  getData(page.value)
}
</script>
<style scoped>
  .wrap {
    padding: 0 15px;
  }
  .li {
    padding: 10px 0;
    border-bottom: 1px solid #EDEDED;
  }
  .top {
    color: #222222;
    font-size: 15px;
    font-weight: 700;
    line-height: 23px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bottom {
    color: #979797;
    font-size: 10px;
    line-height: 23px;
  }
</style>